<template>
    <div class="new-course">
        <div class="new-course-main">
            <div class="new-course-t">
                <div class="title-hot">

                    <div class="hot">HOT</div>
                    <div class="hot-c"></div>
                </div>
                <div class="title-txt">新上好课</div>
            </div>

            <ul class="new-course-b">
                <li v-for="item in CourseList" :key="item.id" @click="goDetail(item.id)" class="li-top">
                    <img :src="item.courseCover" alt="">
                    <div class="course-content">
                        <h3>{{ item.courseName }}</h3>
                        <div>{{ courseTypeFn(item.courseLevel) }}· {{ item.clicks }}人报名</div>
                        <div class="price">
                            <div class="price-vip">会员专享</div>
                            <div class='price-total'>￥ {{ item.salePrice }}</div>
                        </div>
                    </div>
                </li>

            </ul>


        </div>
    </div>
</template>


<script setup>
// element
import { mostNew } from '@/utils/api/Course'

// 引入混入（mixin）文件判断等级
import courseType from '@/mixin/CourseType'

let { courseTypeFn } = courseType();

// 创建proxy数据对象 接收（响应的）
let CourseList = ref([]);

// 此生命周期 有data，没有el(其实已经在准备了)
onBeforeMount(() => {

    // 新上好课数据
    mostNew({
        pageNum: 1,
        pageSize: 8
    }).then(res => {
        CourseList.value = res.data.data.pageInfo.list
    })
})

// 点击路由函数 跳转到课程详情页
let router = useRouter();

// 进去课程详情页
const goDetail = (id) => {
    router.push({
        path: '/course/detail',
        query: {
            id
        }
    })
}


</script>



<style scoped>
.new-course {
    padding: 38px 0;
    background: #F3F5F9;
}

.new-course-main {
    width: 1000px;
    margin: 0 auto;
}

.new-course-t {
    display: flex;
}

.title-hot {
    display: flex;
}

.title-hot .hot {
    width: 65px;
    line-height: 25px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #FF727F 0%, #FC685C 100%);
    border-radius: 5px 0px 5px 5px;
}

.title-hot .hot-c {
    width: 0;
    height: 0;
    border: 3px solid #FC685C;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.title-txt {
    position: relative;
    z-index: 999;
    margin-left: 11px;
    font-size: 23px;
    color: #333333;
}

.title-txt:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 120%;
    margin-left: -10%;
    height: 9px;
    background: linear-gradient(90deg, #FBF84F 0%, #FEA935 100%);
    border-radius: 5px;

}

.new-course-b {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}

.li-top {
    transition: margin-top 0.2s;
    box-shadow: 1px 1px 10px rgba(24, 30, 62, 0.4);
}

.li-top:hover {
    margin-top: 1px;
    cursor: pointer;
    box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
}

.new-course-b li {
    float: left;
    margin-top: 38px;
    width: 240px;
    height: 255px;
    background: #FFFFFF;
    box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
    border-radius: 5px;
}

.new-course-b li img {
    width: 240px;
    height: 153px;
}

.course-content {
    padding: 7px 16px;
}

.course-content h3 {
    font-size: 12px;
    color: #333333;
}

.course-content>div {
    padding: 7px 0;
    font-size: 12px;
    color: #808080;
}

.price {
    display: flex;
}

.price-vip {
    width: 64px;
    height: 16px;
    margin-right: 3px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #FF928E 0%, #FE7062 99%);
    border-radius: 16px 0px 16px 0px;
}

.price-total {
    font-size: 12px;
    color: #FF727F;
}
</style>